<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="disableSubmit">
        <a-form-model ref="setAreaform" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24" v-if="showClass">
              <a-form-model-item label="班级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classIds">
                <div style="display: flex;">
                  <a-checkbox style="width:70px" :checked="checkedAll" @click="toggleCheckedAll">全选</a-checkbox>
                  <j-multi-select-tag style="flex:1;padding-top:8px;" type="checkboxRow" :rowCol="6" v-model="model.classIds" ref="classSelectRef"
                    :options="classOptions" @change="onChangeClass" />
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="设置" :labelCol="labelCol" :wrapperCol="wrapperCol"  >
                <a-radio-group v-model="setType" @change="handleChangeType">
                  <a-radio-button :value="1">
                    统一设置
                  </a-radio-button>
                  <a-radio-button :value="2">
                    每日设置
                  </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="setType == 1">
              <a-form-model-item label="所有时间" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:0;">
                <a-form-model-item prop="acquisitionStartTime" :style="{ display: 'inline-block' }">
                  <j-time placeholder="请选择开始时间" v-model="single.acquisitionStartTime" style="width:100%;"   />
                </a-form-model-item>
                <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
                  -
                </span>
                <a-form-model-item prop="acquisitionEndTime" :style="{ display: 'inline-block' }">
                  <j-time placeholder="请选择结束时间" v-model="single.acquisitionEndTime" style="width:100%;" />
                </a-form-model-item>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="setType == 2" v-for="(item, index) in classAreaTimeList" :key="index" :value="item.weekDay">
              <a-form-model-item :label="item.weekDayStr" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom:0;">
                <a-form-model-item prop="acquisitionStartTime" :style="{ display: 'inline-block' }">
                  <j-time placeholder="请选择开始时间" v-model="item.acquisitionStartTime" style="width:100%;" />
                </a-form-model-item>
                <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
                  -
                </span>
                <a-form-model-item prop="acquisitionEndTime" :style="{ display: 'inline-block' }">
                  <j-time placeholder="请选择结束时间" v-model="item.acquisitionEndTime" style="width:100%;" />
                </a-form-model-item>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
  import { skClassList } from '@/api/management.js'
  import { getAction, httpAction } from '@/api/manage';
  import SkClassForm from './SkClassForm'
  export default {
    name: 'SkClassSetAreaModal',
    components: {
      SkClassForm
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        model:{
          classIds: '',
          skClassAreaTimeList: []
        },
        title:'',
        width:800,
        visible: false,
        disableSubmit: false,
        confirmLoading: false,
        validatorRules: {
          // acquisitionStartTime:[{required: true, message: '请选择开始时间'}],
          // acquisitionEndTime:[{required: true, message: '请选择结束时间'}],
        },
        url: {
          add: "/management/skClass/setClassAreaTime",
          edit: "/management/skClass/setClassAreaTime",
          skAreaTime: {
            list: '/management/skClass/getClassAreaTime'
          },
        },
        showClass: true,
        setType: 1,
        classOptions: [],
        checkedAll: false,
        selectClassIds: [],
        classList: [],
        single: {
          acquisitionStartTime: "",
          acquisitionEndTime: ""
        },
        classAreaTimeList: [],
        defaultClassAreaTimeList: [
          {
            "weekDay": 1,
            "weekDayStr": '周一',
            "acquisitionStartTime": "",
            "acquisitionEndTime": ""
          },
          {
            "weekDay": 2,
            "weekDayStr": '周二',
            "acquisitionStartTime": "",
            "acquisitionEndTime": ""
          },
          {
            "weekDay": 3,
            "weekDayStr": '周三',
            "acquisitionStartTime": "",
            "acquisitionEndTime": ""
          },
          {
            "weekDay": 4,
            "weekDayStr": '周四',
            "acquisitionStartTime": "",
            "acquisitionEndTime": ""
          },
          {
            "weekDay": 5,
            "weekDayStr": '周五',
            "acquisitionStartTime": "",
            "acquisitionEndTime": ""
          },
          {
            "weekDay": 6,
            "weekDayStr": '周六',
            "acquisitionStartTime": "",
            "acquisitionEndTime": ""
          },
          {
            "weekDay": 7,
            "weekDayStr": '周日',
            "acquisitionStartTime": "",
            "acquisitionEndTime": ""
          },
        ]
      }
    },
    mounted() {
      this.getClassList()
    },
    methods: {
      // 获取所有的班级
      getClassList() {
        this.dataDate = this.$skCommon.getDate(1);
        skClassList()
          .then(res => {
            if (res.success) {
              this.classOptions = res.result.map(item => ({
                value: item.id,
                text: item.className
              }));
            } else {
              this.$message.warning(res.message)
            }
          })
          .catch(error => {
            console.error(error)
          })
      },
      //全选和全不选
      toggleCheckedAll() {
        this.checkedAll = !this.checkedAll;
        if(this.checkedAll) {
          this.model.classIds = this.classOptions.map(item => {
            return item.value
          }).join(',')
        }else{
          this.model.classIds = ''
        }
      },
      // 单个check
      onChangeClass(e) {
        const classIdList = this.model.classIds.split(',')
        this.checkedAll = classIdList.length == this.classOptions.length
      },
      // 选择设置
      handleChangeType(e) {
        console.log('radio', e.target.value)
      },
      getConfirmLoading(data){
        this.confirmLoading = data;
      },
      reset(){
        this.visible=true
        this.setType = 1
        this.single.acquisitionStartTime = ''
        this.single.acquisitionEndTime = ''
        let defaultClassAreaTimeList = JSON.parse(JSON.stringify(this.defaultClassAreaTimeList));
        this.classAreaTimeList = defaultClassAreaTimeList
      },
      add () {
        this.showClass = true
        this.reset()
        getAction(this.url.skAreaTime.list).then(res => {
          this.model = res.result
          // this.classAreaTimeList = this.defaultClassAreaTimeList;   
          const classIdList = this.model.classIds.split(',')
          this.checkedAll = classIdList.length == this.classOptions.length
        })
      },
      edit (record) {
        this.showClass=false
        this.reset()
        getAction(this.url.skAreaTime.list, {
          classId: record.id
        }).then(res => {
          this.model = res.result
          if(this.model.skClassAreaTimeList.length > 0) {
            // this.classAreaTimeList = this.defaultClassAreaTimeList;   
            this.classAreaTimeList.forEach(item => {
              const data = this.model.skClassAreaTimeList.find(i => i.weekDay == item.weekDay)
              if(data == null) {
                this.setType = 2
                this.single.acquisitionStartTime = ''
                this.single.acquisitionEndTime = ''
                item.acquisitionStartTime = ''
                item.acquisitionEndTime = ''
              }else{
                item.acquisitionStartTime = data.acquisitionStartTime
                item.acquisitionEndTime = data.acquisitionEndTime
                //判断默认选中设置方式及值
                if(this.single.acquisitionStartTime == '' && this.setType == 1){
                  this.single.acquisitionStartTime = data.acquisitionStartTime
                  this.single.acquisitionEndTime = data.acquisitionEndTime         
                }else if(this.single.acquisitionStartTime != '' && this.single.acquisitionStartTime != data.acquisitionStartTime) {
                  this.setType = 2
                  this.single.acquisitionStartTime = ''
                  this.single.acquisitionEndTime = ''
                }
              }
            })
          }
          
        })
      },
      close () {
        this.reset();
        this.visible = false;
      },
      handleOk () {
        const that = this;
        if (this.model.skClassAreaTimeList.length > 0 ) {
          this.$confirm({
            title: '确认',
            content: '确认后会覆盖之前的设置，是否确认设置？',
            onOk: function () {
              that.submitForm();
            }
          })
        }else{
          let flag = that.classAreaTimeList.some(item=>item.acquisitionStartTime != "" && item.acquisitionEndTime != "")
          if (this.single.acquisitionStartTime && this.single.acquisitionEndTime || flag) {
            that.submitForm(); 
          }else{
            that.$message.warning("请设置活动时间！");
          }
        }
      },
      submitForm(){
        const that = this;
        if(that.setType == 1){
          that.classAreaTimeList.forEach(item => {
            item.acquisitionStartTime = this.single.acquisitionStartTime;
            item.acquisitionEndTime = this.single.acquisitionEndTime;
          })
        }
        that.model.skClassAreaTimeList = this.classAreaTimeList;
        // 触发表单验证
        this.$refs.setAreaform.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            this.$emit("modelLoading",that.confirmLoading)
            let httpurl = this.url.add;
            let method = 'post';
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
                that.visible = false;
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              this.$emit("modelLoading",that.confirmLoading)
            })
          }
         
        })
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>